<template>
    <s-box title="共词分析" ref="loading">
        <div class="chart-box">
            <div class="chart-wrap" ref="chart"></div>
        </div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
const  COLOR = ['#f96ec4','#6e8ef9','#00b113'];
const  CATEGORYLIST = ['低','中','高'];
export default {
    mixins:[mixin],
    data() {
        return {
           nodes:[],
           edges:[],
           data2
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
        delegate.$off('s-search',this._initSearch)
        delegate.$off('s-resize',this._initChart)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._initSearch)
            delegate.$on('s-resize',this._initChart)
        },
        _initSearch(obj){
            console.log(1111111111,obj)
        },
        randomColor(id){
           let colorList = ['#9a6728','#00a8ff','#0d5a35','#b40177','#1490ae','#00ff00'];
           return colorList[parseInt(Math.random()*colorList.length)];
        　　//var colorStr=Math.floor((0.1+Math.random())*0xFFFFFF).toString(16).toUpperCase();
        　　//return "#"+"000000".substring(0,6-colorStr)+colorStr;
        },
         _setChartOption(){
             let myChart = echarts.init(this.$refs.chart);
             let $this = this;
                myChart.showLoading();
                myChart.hideLoading();
                myChart.clear();
                myChart.setOption(
                {
                    color:COLOR,
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: "quinticInOut",
                    tooltip: {},
                    legend: [{
                        //selectedMode: 'single',
                        left:'10',
                        data: CATEGORYLIST,
                        textStyle:{
                            color:'#fff'
                        }
                    }],
                    series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        symbolSize: 50,
                        force: {
                          repulsion: 1400,
                          edgeLength: [150, 400],
                          layoutAnimation: true
                        },
                        draggable: false,
                        categories: CATEGORYLIST.map((item)=>{
                            return {
                                name: item
                            }
                        }),
                        data: $this.nodes,
                        draggable:true,
                        edges: $this.edges,
                        symbolSize: 30,
                        label: {
                          normal: {
                            show: true,
                            position: 'bottom',
                            color: '#fff'
                          }
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        lineStyle: {
                          normal: {
                            color: 'source',
                            opacity: 0.3,
                            width: 1,
                            curveness: 0.3
                          }
                        }
                    }
                    ]
                },
                true
                );
         },
         _maxWeight(nodelist){
            let MAXWEIT = 1;
            nodelist.forEach(node => {
                if(!node.weight){
                    node.weight = 1;
                }
                if(node.weight >= MAXWEIT){
                    MAXWEIT = node.weight
                }
            })
            return MAXWEIT;
         },
         getItemProperty(weight,c_Weight){
           let colorList = COLOR;
           let categoryList = CATEGORYLIST;
           if(weight/c_Weight <= 0.33){
               return {color:colorList[0],category:categoryList[0]}
           }
           if(weight/c_Weight > 0.33 && weight/c_Weight <= 0.66){
               return {color:colorList[1],category:categoryList[1]}
           }
           if(weight/c_Weight > 0.66 ){
               return {color:colorList[2],category:categoryList[2]}
           }
        },
        _getCoWordAnalysisData(){
            this.nodes = [];
            this.edges = [];
            if(!this.navCurrentId) return;
                    this.api({
                            url: "newtechanalyse/coWordAnalysis",
                            method: "post",
                            data:`topicId=${this.navCurrentId}`
                    }).then(data => {
                        this.$refs.loading.hide();
                        let $this = this;
                        const MAXWEIGHT = $this._maxWeight(data.nodes);
                        data.nodes.map(function(node) {
                            let {category ,color } = $this.getItemProperty(node.weight,MAXWEIGHT);
                            var datanode = {
                                // x: parseInt(Math.random()*800),
                                // y: parseInt(Math.random()*800),
                                category:category,
                                id: node.id + '',
                                name: node.label,
                                value: node.weight,
                                symbolSize: 25,
                                itemStyle: {
                                normal: {
                                    color: color
                                }
                                }
                            };
                            $this.nodes.push(datanode);
                        });

                        data.edges.map(function(edge) {
                            var dataedge =  {
                                source: edge.sourceID + '',
                                target: edge.targetID + '',
                                lineStyle:{
                                    width: edge.size > 5 ?  5 : edge.size,
                                    // color: '#fff'
                                },
                                label: {
                                  normal: {
                                    show: false,
                                    formatter: '频次'+edge.size
                                  },
                                  emphasis:{
                                    show: true,
                                  }
                                },
                            };
                             $this.edges.push(dataedge);
                        });

                        this._setChartOption();
                    }).catch((error) =>{ this.$refs.loading.hide()})
        },
        _initChart(bool) {
            //if(!bool) return;
            this.$refs.loading.show();
            this.chart();
        },
        chart(){
             this.$nextTick(() => {
                this._setChartOption();
            });
            this._getCoWordAnalysisData();
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-box{
      position: relative;
      padding-top: 70.6%;
  }
  .chart-wrap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
</style>
